
import { useEffect,  useState } from "react";
import {connect } from 'react-redux'
import {NavBar ,Icon,WhiteSpace, Toast,Button} from 'antd-mobile'
import add_friend from '../../../../statics/img/add_friend.svg'
import {get_friend_list,get_message} from '../../../../network/freind'

import './friend.css'



const Friend = ({usr,history,wsurl}) => {
    
    // const [wsurl,setwsurl] = useState(ws_basic_url + usr)
    const [friendlist,setfriendlist] = useState([])
    const [aflist,setaflist] = useState([])
    const [websocket,setwebsocket] = useState(new WebSocket(wsurl))

    
    
    useEffect(()=>{
        const getFL = async()=>{
            const fl = await get_friend_list()
            setfriendlist(fl.data)
        }

        const getR = async() =>{
            const record = await get_message()
            const total = record.data
           console.log(total);
            const list = []
            for(let item in total){
                if(total[item][2] && total[item][2][0].to === usr){                 
                    const obj = total[item][2][0]
                    const afitem = {
                        itname : obj.from,
                        date :obj.date
                    }
                    console.log(afitem);
                    list.push(afitem)
                }
            }
            setaflist(list)
        }
        getR()
        getFL()




        // if(!window.WebSocket) message.error('您的设备不支持该功能！',1)
        // else{
           
        //     websocket = new WebSocket(wsurl)
        //     websocket.onopen = function() {
        //         console.log("连接成功");
        //     }
    
        //     websocket.onclose = function() {
        //         console.log("退出连接");
        //     }
    
        //     websocket.onmessage = function(event) {
    
        //         console.log(event.data);
        //         let obj = JSON.parse(event.data);
                
        //     }
            
        // }

        return ()=>{
            // websocket.close();
            console.log('frienddie');
        }
        
    },[])

  

    

    

    const addfriend = ()=>{
        history.push('/main/profile/friend/add')
    }

    const click_firend = (item) =>{
        history.push({pathname:'/main/profile/fchat',state:item})
    }


    const allow_apply = (i) => {
        const send_allow = {
            from : usr,
            to : i.itname,
            type : 4,
            data : null
        }
        websocket.send(JSON.stringify(send_allow));
        Toast.success('添加成功！',1)
        const new_list = []
        for( let item of aflist){
            if(item.itname !== i.itname){
                new_list.push(item)
            }
        }
        setaflist(new_list)
        const getFL = async()=>{
            const fl = await get_friend_list()
            setfriendlist(fl.data)
        }
        getFL()
    }

    const refuse_apply =() =>{

    }

    return (<div className="friend">
        <NavBar
            mode="dark"
            icon={<Icon type="left" />}
            onLeftClick={() => {history.goBack()}}
            rightContent={<img src={add_friend} height="40px" onClick={addfriend}></img>}
            
            >
        好友列表
      </NavBar>
        <div className="friend_list_content">
            {friendlist.length === 0 ? <div>暂无</div>:
                <div className="friend_list">
                    <WhiteSpace></WhiteSpace>
                    {friendlist.map((item)=>{
                        return (<div key={item.username} className='friend_item' onClick={()=>click_firend(item)}>
                        <div className="friend_item_avatar"><img src={item.avatar}/></div>
                            <div className="friend_item_name">{item.username}</div>
                        </div>)
                    })}
                </div>
            }
            <WhiteSpace size='lg'></WhiteSpace>
             {   aflist.length === 0 ? null :
             
             <div className="apply_friend_list">
                <NavBar mode="dark">
                    申请列表
                </NavBar>
                {
                    
                    aflist.map((item)=>{
                        return (
                            <div key={item.date} className='friend_apply_item'>
                                <div className="friend_apply_left">用户名：{item.itname}</div>
                                
                                <Button onClick={()=>allow_apply(item)} size='small'>同意</Button>
                                <Button onClick={refuse_apply} size='small'>拒绝</Button>
                            
                                
                            </div>
                        )
                    })
                }
             </div>
            }
           
        </div>
        </div>)
}


const mapState2Props = (state) =>({
    usr : state.getIn(['login','usr']),
    wsurl : state.getIn(['login','ws_url'])
})

const mapDisPatch2Props ={

}

export default connect(mapState2Props,mapDisPatch2Props)(Friend)